import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { channelAction, channelLightAction } from '../store/actions/channel'
import { RootState } from '../store'
export default function Channel() {
  const dispatch = useDispatch()
  const channel = useSelector((state: RootState) => state.channel)
  useEffect(() => {
    dispatch(channelAction())
  }, [dispatch])

  /* 高亮 */
  const lightHandle = (id: number) => {
    dispatch(channelLightAction(id))
  }
  return (
    <ul className="catagtory">
      {channel.channelList.map(item => {
        // return <li key={item.id} className="select">{item.name}</li>
        return <li onClick={() => lightHandle(item.id)} key={item.id} className={item.id === channel.activeId ? 'select' : ''}>{item.name}</li>
      })}

    </ul>
  )
}
